<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语单词收集</title>
    <link rel="stylesheet" href="./stylelink/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <header>
        <h1>英语单词收集</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#words">单词列表</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <section id="home">
        <h2>首页</h2>
        <p>欢迎来到英语单词收集页面！</p>
    </section>
    <section id="words">
        <h2>单词列表</h2>
<div class="word-list">
    <div class="word-item">
        <h3>Anchor (锚点)</h3>
        <p>用于创建超链接的元素。</p>
        <button id="play-anchor">听发音</button>
    </div>
    <div class="word-item">
        <h3>Attribute (属性)</h3>
        <p>HTML 元素的附加信息。</p>
        <button id="play-attribute">听发音</button>
    </div>
    <div class="word-item">
        <h3>Background (背景)</h3>
        <p>设置元素背景颜色或图像。</p>
        <button id="play-background">听发音</button>
    </div>
    <div class="word-item">
        <h3>Head (头部)</h3>
        <p>文档的头部部分，包含元信息。</p>
        <button id="play-head">听发音</button>
    </div>
    <div class="word-item">
        <h3>Body (主体)</h3>
        <p>文档的主要内容部分。</p>
        <button id="play-body">听发音</button>
    </div>
    <div class="word-item">
        <h3>H1-H6 (标题)</h3>
        <p>从大到小的标题元素。</p>
        <button id="play-h1-h6">听发音</button>
    </div>
    <div class="word-item">
        <h3>Div (块级元素)</h3>
        <p>无语义的块级容器元素。</p>
        <button id="play-div">听发音</button>
    </div>
    <div class="word-item">
        <h3>Span (行内元素)</h3>
        <p>无语义的行内元素。</p>
        <button id="play-span">听发音</button>
    </div>
    <div class="word-item">
        <h3>Img (图片)</h3>
        <p>用于插入图片的元素。</p>
        <button id="play-img">听发音</button>
    </div>
    <div class="word-item">
        <h3>Src (源地址)</h3>
        <p>图片的链接地址。</p>
        <button id="play-src">听发音</button>
    </div>
    <div class="word-item">
        <h3>Alt (替代文本)</h3>
        <p>图片无法显示时的替代文本。</p>
        <button id="play-alt">听发音</button>
    </div>
    <div class="word-item">
        <h3>A (链接)</h3>
        <p>用于创建超链接的元素。</p>
        <button id="play-a">听发音</button>
    </div>
    <div class="word-item">
        <h3>Href (链接地址)</h3>
        <p>链接的目标地址。</p>
        <button id="play-href">听发音</button>
    </div>
    <div class="word-item">
        <h3>Target (打开方式)</h3>
        <p>链接的目标窗口或框架。</p>
        <button id="play-target">听发音</button>
    </div>
    <div class="word-item">
        <h3>Title (标题)</h3>
        <p>元素的标题或工具提示。</p>
        <button id="play-title">听发音</button>
    </div>
    <div class="word-item">
        <h3>Style (样式)</h3>
        <p>元素的内联样式。</p>
        <button id="play-style">听发音</button>
    </div>
    <div class="word-item">
        <h3>Class (类名)</h3>
        <p>用于指定元素类名的属性。</p>
        <button id="play-class">听发音</button>
    </div>
    <div class="word-item">
        <h3>ID (元素 ID)</h3>
        <p>用于唯一标识元素的属性。</p>
        <button id="play-id">听发音</button>
    </div>
    <div class="word-item">
        <h3>Table (表格)</h3>
        <p>用于创建表格的元素。</p>
        <button id="play-table">听发音</button>
    </div>
    <div class="word-item">
        <h3>Tr (行)</h3>
        <p>表格中的行元素。</p>
        <button id="play-tr">听发音</button>
    </div>
    <div class="word-item">
        <h3>Th (表头单元格)</h3>
        <p>表格中的表头单元格。</p>
        <button id="play-th">听发音</button>
    </div>
    <div class="word-item">
        <h3>Td (数据单元格)</h3>
        <p>表格中的数据单元格。</p>
        <button id="play-td">听发音</button>
    </div>
    <div class="word-item">
        <h3>Colspan (列合并)</h3>
        <p>合并单元格的列数。</p>
        <button id="play-colspan">听发音</button>
    </div>
    <div class="word-item">
        <h3>Rowspan (行合并)</h3>
        <p>合并单元格的行数。</p>
        <button id="play-rowspan">听发音</button>
    </div>
    <div class="word-item">
        <h3>Form (表单)</h3>
        <p>用于收集用户输入的表单。</p>
        <button id="play-form">听发音</button>
    </div>
    <div class="word-item">
        <h3>Input (输入框)</h3>
        <p>用于接收用户输入的元素。</p>
        <button id="play-input">听发音</button>
    </div>
    <div class="word-item">
        <h3>Type (输入类型)</h3>
        <p>输入框的类型。</p>
        <button id="play-type">听发音</button>
    </div>
    <div class="word-item">
        <h3>Name (名称)</h3>
        <p>输入框的名称。</p>
        <button id="play-name">听发音</button>
    </div>
    <div class="word-item">
        <h3>Value (值)</h3>
        <p>输入框的初始值。</p>
        <button id="play-value">听发音</button>
    </div>
    <div class="word-item">
        <h3>Checked (是否勾选)</h3>
        <p>复选框或单选框的初始状态。</p>
        <button id="play-checked">听发音</button>
    </div>
    <div class="word-item">
        <h3>Radio (单选框)</h3>
        <p>一组单选按钮中的一个。</p>
        <button id="play-radio">听发音</button>
    </div>
    <div class="word-item">
        <h3>Checkbox (多选框)</h3>
        <p>允许用户选择多个选项的复选框。</p>
        <button id="play-checkbox">听发音</button>
    </div>
    <div class="word-item">
        <h3>Select (下拉框)</h3>
        <p>用于创建下拉列表的元素。</p>
        <button id="play-select">听发音</button>
    </div>
    <div class="word-item">
        <h3>Option (选项)</h3>
        <p>下拉列表中的一个选项。</p>
        <button id="play-option">听发音</button>
    </div>
    <div class="word-item">
        <h3>Disabled (禁用)</h3>
        <p>禁用输入框或按钮。</p>
        <button id="play-disabled">听发音</button>
    </div>
    <div class="word-item">
        <h3>Readonly (只读)</h3>
        <p>使输入框只读。</p>
        <button id="play-readonly">听发音</button>
    </div>
    <div class="word-item">
        <h3>Button (按钮)</h3>
        <p>用于触发动作的按钮。</p>
        <button id="play-button">听发音</button>
    </div>
    <div class="word-item">
        <h3>Submit (提交按钮)</h3>
        <p>用于提交表单的按钮。</p>
        <button id="play-submit">听发音</button>
    </div>
        <div class="word-item">
            <h3>Reset (重置按钮)</h3>
            <p>用于重置表单的按钮。</p>
            <button id="play-reset">听发音</button>
        </div>
        <div class="word-item">
            <h3>Label (文本标签)</h3>
            <p>与表单控件关联的标签。</p>
            <button id="play-label">听发音</button>
        </div>
        <div class="word-item">
            <h3>Textarea (文本域)</h3>
            <p>用于多行文本输入的元素。</p>
            <button id="play-textarea">听发音</button>
        </div>
        <div class="word-item">
            <h3>Rows (行数)</h3>
            <p>文本域的默认行数。</p>
            <button id="play-rows">听发音</button>
        </div>
        <div class="word-item">
            <h3>Cols (列数)</h3>
            <p>文本域的默认列数。</p>
            <button id="play-cols">听发音</button>
        </div>
        <div class="word-item">
            <h3>Placeholder (提示语)</h3>
            <p>输入框中的占位符文本。</p>
            <button id="play-placeholder">听发音</button>
        </div>
        <div class="word-item">
            <h3>Required (是否必填)</h3>
            <p>指定输入框是否为必填项。</p>
            <button id="play-required">听发音</button>
        </div>
        <div class="word-item">
            <h3>Maxlength (最大长度)</h3>
            <p>输入框的最大字符数。</p>
            <button id="play-maxlength">听发音</button>
        </div>
        <div class="word-item">
            <h3>Minlength (最小长度)</h3>
            <p>输入框的最小字符数。</p>
            <button id="play-minlength">听发音</button>
        </div>
        <div class="word-item">
            <h3>Pattern (格式匹配)</h3>
            <p>输入框的正则表达式模式。</p>
            <button id="play-pattern">听发音</button>
        </div>
        <div class="word-item">
            <h3>Email (邮箱类型)</h3>
            <p>用于输入电子邮件地址的输入类型。</p>
            <button id="play-email">听发音</button>
        </div>
        <div class="word-item">
            <h3>Tel (电话类型)</h3>
            <p>用于输入电话号码的输入类型。</p>
            <button id="play-tel">听发音</button>
        </div>
        <div class="word-item">
            <h3>Password (密码类型)</h3>
            <p>用于输入密码的输入类型。</p>
            <button id="play-password">听发音</button>
        </div>
        <div class="word-item">
            <h3>Number (数字类型)</h3>
            <p>用于输入数字的输入类型。</p>
            <button id="play-number">听发音</button>
        </div>
        <div class="word-item">
            <h3>Date (日期类型)</h3>
            <p>用于输入日期的输入类型。</p>
            <button id="play-date">听发音</button>
        </div>
        <div class="word-item">
            <h3>Time (时间类型)</h3>
            <p>用于输入时间的输入类型。</p>
            <button id="play-time">听发音</button>
        </div>
        <div class="word-item">
            <h3>Range (范围类型)</h3>
            <p>用于输入数值范围的滑块。</p>
            <button id="play-range">听发音</button>
        </div>
        <div class="word-item">
            <h3>Color (颜色类型)</h3>
            <p>用于选择颜色的输入类型。</p>
            <button id="play-color">听发音</button>
        </div>
        <div class="word-item">
            <h3>Search (搜索类型)</h3>
            <p>用于搜索的输入类型。</p>
            <button id="play-search">听发音</button>
        </div>
        <div class="word-item">
            <h3>Datetime (日期时间类型)</h3>
            <p>用于输入日期和时间的输入类型。</p>
            <button id="play-datetime">听发音</button>
        </div>
        <div class="word-item">
            <h3>Datetime-local (本地日期时间类型)</h3>
            <p>用于输入本地日期和时间的输入类型。</p>
            <button id="play-datetime-local">听发音</button>
        </div>
        <div class="word-item">
            <h3>Week (星期类型)</h3>
            <p>用于输入周数的输入类型。</p>
            <button id="play-week">听发音</button>
        </div>
        <div class="word-item">
            <h3>Month (月份类型)</h3>
            <p>用于输入月份的输入类型。</p>
            <button id="play-month">听发音</button>
        </div>
        <div class="word-item">
            <h3>Fieldset (表单元素组)</h3>
            <p>用于分组表单元素的容器。</p>
            <button id="play-fieldset">听发音</button>
        </div>
        <div class="word-item">
            <h3>Legend (表单元素组标题)</h3>
            <p>表单元素组的标题。</p>
            <button id="play-legend">听发音</button>
        </div>
        <div class="word-item">
            <h3>Label (表单控件标签)</h3>
            <p>与表单控件关联的标签。</p>
            <button id="play-label-2">听发音</button>
        </div>
        <div class="word-item">
            <h3>Optgroup (选项组)</h3>
            <p>用于分组选项的元素。</p>
            <button id="play-optgroup">听发音</button>
        </div>
        <div class="word-item">
            <h3>Command (命令)</h3>
            <p>用于表示命令的元素。</p>
            <button id="play-command">听发音</button>
        </div>
        <div class="word-item">
            <h3>Menu (上下文菜单)</h3>
            <p>用于创建上下文菜单的元素。</p>
            <button id="play-menu">听发音</button>
        </div>
        <div class="word-item">
            <h3>Footer (底部)</h3>
            <p>页面或部分的底部区域。</p>
            <button id="play-footer">听发音</button>
        </div>
        <div class="word-item">
            <h3>Header (页眉)</h3>
            <p>页面或部分的顶部区域。</p>
            <button id="play-header">听发音</button>
        </div>
        <div class="word-item">
            <h3>Video (视频)</h3>
            <p>用于嵌入视频的元素。</p>
            <button id="play-video">听发音</button>
        </div>
        <div class="word-item">
            <h3>Audio (音频)</h3>
            <p>用于嵌入音频的元素。</p>
            <button id="play-audio">听发音</button>
        </div>
        <div class="word-item">
            <h3>Source (媒体资源)</h3>
            <p>指定媒体文件来源的元素。</p>
            <button id="play-source">听发音</button>
        </div>
        <div class="word-item">
            <h3>Track (字幕轨道)</h3>
            <p>用于添加字幕或注释的元素。</p>
            <button id="play-track">听发音</button>
        </div>
        <div class="word-item">
            <h3>Canvas (画布)</h3>
            <p>用于绘制图形的元素。</p>
            <button id="play-canvas">听发音</button>
        </div>
        <div class="word-item">
            <h3>SVG (矢量图)</h3>
            <p>用于嵌入矢量图形的元素。</p>
            <button id="play-svg">听发音</button>
        </div>
        <div class="word-item">
            <h3>Path (路径)</h3>
            <p>定义 SVG 中的路径。</p>
            <button id="play-path">听发音</button>
        </div>
        
            <!-- 添加更多单词 -->
            <!-- 重复上述结构，直到达到50个单词 -->
        </div>
    </section>
    <section id="contact">
        <h2>联系我们</h2>
        <p>有任何问题，请通过以下方式联系我们。</p>
    </section>
    <footer>
        <p>&copy; 2023 英语单词收集网站. All rights reserved.</p>
    </footer>

    <!-- JavaScript for audio playback -->
    <script>
        $(document).ready(function () {
            // 动态绑定所有播放按钮
            $('.word-item button').each(function (index, element) {
                var word = $(element).attr('id').replace('play-', '');
                $(element).click(function () {
                    var audio = new Audio(word + '.mp3');
                    audio.play();
                });
            });
        });
    </script>
</body>

</html>